<template>
  <div class="panel panel-default">
    <div class="panel-heading position-relative">
      <TitleTip :title=titleDetail position="bottom">
        <span class="fs-6 fw-lighter position-absolute end-0" style="margin-right: 10px">
            {{this.$store.state.user.userSubject.length}}/{{Math.ceil((this.$store.state.user.userInfo.soul+this.$store.state.user.userInfo.buff.soul)/10)}}
          </span>
        <h3 class="panel-title">
          {{ title }}
        </h3>
      </TitleTip>
    </div>
    <div class="panel-body">
      <ul class="list-group">
        <template v-for="(item,key) in this.$store.state.user.userSubject" :key="item" >
          <li class="list-group-item">
            <div class="panel-nav" data-bs-toggle="collapse" :href="'#collapseSubject'+key" role="button" aria-expanded="false"
                :aria-controls="'collapseSubject'+key">
              <div class="btn-group pull-right" role="group">
                <button @click="stopStudy(key)" :style="'display:'+(item.state===0?'none':'block')" class="btn btn-success btn-xs" type="button" disabled>主修功法</button>
                <button @click="study(key)" :style="'display:'+(item.state===1?'none':'block')" class="btn btn-default btn-xs">修炼</button>
                <button @click="remove(key)" :style="'display:'+(item.state===1?'none':'block')" class="btn btn-default btn-xs">遗忘</button>
              </div>
              <button type="button" class="btn btn-xs" style="font-size: 6px" disabled>{{ item.levelName }}</button>
              <TitleTip :title="
                (item.expSpeedBuff>0?item.expSpeedBuff+'修为速度、':'')+
                (item.hpBuff>0?item.hpBuff+'血量、':'')+
                (item.hotBuff>0?item.hotBuff+'回血速度、':'')+
                (item.levelUpOddsBuff>0?item.levelUpOddsBuff+'突破概率、':'')+
                (item.travelSpeedBuff>0?item.travelSpeedBuff+'历练速度、':'')+
                (item.soulBuff>0?item.soulBuff+'灵魂、':'')+
                (item.lifeBuff>0?item.lifeBuff+'寿元、':'')"
                  position="bottom">
                {{ item.name ?? '' }}
              </TitleTip>
            </div>
          </li>
          <li class="list-group-item collapse" :id="'collapseSubject'+key">
            <ul class="list-group list-group-compact">
              <li :class="item.expSpeedBuff<=0?'d-none':''" class="list-group-item text-success">增加{{item.expSpeedBuff}}修练速度</li>
              <li :class="item.hpBuff<=0?'d-none':''" class="list-group-item">增加{{item.hpBuff}}血量</li>
              <li :class="item.hotBuff<=0?'d-none':''" class="list-group-item">增加{{item.hotBuff}}回血速度</li>
              <li :class="item.levelUpOddsBuff<=0?'d-none':''" class="list-group-item">增加{{item.levelUpOddsBuff}}的突破概率</li>
              <li :class="item.travelSpeedBuff<=0?'d-none':''" class="list-group-item">增加{{item.travelSpeedBuff}}的历练速度</li>
              <li :class="item.soulBuff<=0?'d-none':''" class="list-group-item">增加灵魂{{item.soulBuff}}强度</li>
              <li :class="item.lifeBuff<=0?'d-none':''" class="list-group-item">增加寿元{{item.lifeBuff}}</li>
            </ul>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import TitleTip from './TitleTip.vue'

export default {
  name: 'UserSubject',
  data: function () {
    return {
      title: "修炼功法",
      titleDetail: "主修功法，增加修炼速度；已学习功法，可增加属性：血量、回血速度、寿元、灵魂强度、历练速度、突破概率",
    }
  },
  components: {
    TitleTip
  },
  methods:{
    /**
     * 遗忘功法
     * @param key
     */
    remove(key){
      let subject = this.$store.state.user.userSubject[key];
      this.$store.state.user.userBox.subject.unshift(subject);
      this.$store.state.user.userSubject.splice(key,1)
      // 清理buff
      // this.$store.state.user.userInfo.buff.expSpeed += subject.expSpeedBuff
      this.$store.state.user.userInfo.buff.levelUpOdds -= subject.levelUpOddsBuff
      this.$store.state.user.userInfo.buff.travelSpeed -= subject.travelSpeedBuff
      this.$store.state.user.userInfo.buff.soul -= subject.soulBuff
      // this.$store.state.user.userInfo.buff.hp -= subject.hpBuff
      this.$store.state.user.userInfo.buff.hot -= subject.hotBuff
      this.$store.state.user.userInfo.buff.life -= subject.lifeBuff
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },


    study(key){
      let subject = this.$store.state.user.userSubject[key];
      // 清除其他功法
      if(this.$store.state.user.userSubject.length>0){
        this.stopStudy(0)
      }

      // 剔除指定功法，排序至第一个
      this.$store.state.user.userSubject.splice(key,1)
      subject.state = 1;
      this.$store.state.user.userSubject.unshift(subject)

      // 主修功法增加修炼速度
      // this.$store.state.user.userInfo.buff.expSpeed += subject.expSpeedBuff
      this.$store.state.user.userInfo.buff.expSpeed += (subject.masteryLevel+1)*subject.expSpeedBuff

      // console.log(this.$store.state.user.userInfo.buff.expSpeed,subject.expSpeedBuff)
      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
    },

    stopStudy(key){
      let subject =  this.$store.state.user.userSubject[key];

      if(subject.state === 1){
        // this.$store.state.user.userInfo.buff.expSpeed -= subject.expSpeedBuff
        this.$store.state.user.userInfo.buff.expSpeed -= (subject.masteryLevel+1)*subject.expSpeedBuff
      }
      subject.state = 0;
      this.$store.state.user.userSubject[key].state = 0

      this.$store.commit('user/updateMonth', this.$store.state.user.other.month);
      // console.log(key)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
